<#include "./template.ftl">

<#macro head>
    <title>个人中心-Morketing</title>
    <link rel="stylesheet" href="${base}/client/css/reveal.css">
    <link rel="stylesheet" href="${base}/client/css/myself.css">
    <link href='${base}/system/charisma-static/css/uploadify.css' rel='stylesheet'>
</#macro>

<#macro content>
<div id="contents">
    <div class="main wrap clearfix myself-wrap">
         <div class="myself-info">
              <div class="left f-l">
                  <div id="userPicDiv">
                  <#if user?? && user.photoUrl??>
                    <img width="100%" id="userPic" src="${base}/system/getImg?imgId=${user.photoUrl}&w=88" alt="">
                  <#else>
                      <img width="100%" id="userPic" src="${base}/client/images/pic/myself/user.png" alt="">
                  </#if>
                  </div>
                  <#if can_edit??>
                    <input data-no-uniform="true" type="file" id="imgSel" class="file_upload">
                  </#if>
              </div>
              <ul class="right">
                  <li><b>昵称</b>
                        <#if can_edit??>
                            <input id="name" type="text" placeholder="${user.nickName}" value="${user.nickName}"> <a class="set setname">修改</a>
                        <#else>
                            <span>${user.nickName}</span>
                        </#if>
                  </li>
                    <#if can_edit??>
                      <li><b>密码</b>
                          <input id="password" type="password" value="${user.password}"> <a class="set" data-reveal-id="myModal" >修改</a>
                      </li>
                 </#if>
                  <li><b>邮箱</b>
                    <#if can_edit??>
                      <input readonly="readonly" type="text" value="${user.email}">
                    <#else>
                        <span>${user.email!''}</span>
                    </#if>
                  </li>
                  <li class="last"><b>介绍</b>
                    <#if can_edit??>
                      <textarea rows="3" cols="20" id="intro" type="text" placeholder="${user.whois!''}" value="${user.whois!''}"></textarea> <a class="set setintro">修改</a>
                    <#else>
                        <span>${user.whois!''}</span>
                    </#if>
                  </li>
              </ul>
         </div>
         
         <div class="myself-article">
            <#if can_edit??>
                 <#if canPub??>
                    <a class="myself-addBtn" href="${base}/moke/posts/add">发布文章</a>
                 </#if>
            </#if>
             <ul class="tabs-title">
                 <li class="active"><a >我的文章</a> |</li>
                 
                 <li><a>我的回答</a> |</li>
                
                 <li><a>消息中心</a></li>
             </ul>

             <div class="tabs-main">
                 <div class="tabs-div myself-art">
                     <#if posts??>
                         <#list posts as p>
                             <div class="li-item">
                                <div class="f-l l"><a href="${base}/moke/posts/${p.id}"><img width="100%" src="${base}/system/getImg?imgId=${p.postImg!''}&w=224" alt=""></a></div>
                                <div class="cell">
                                    <h2><a href="${base}/moke/posts/${p.id}">${p.postTitle}</a></h2>
                                    <p>${p.postContent}</p>
                                    <div class="tips">
                                        <div class="from">
                                            <span class="name"><img width="100%" src="${base}/system/getImg?imgId=${p.authorPhoto!''}&w=48" alt=""><a href="${base}/profile?userId=${p.postAuthor!''}">${p.postAuthorStr}</a></span>
                                            <span class="view">0</span>
                                            <span class="zan">0</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                         </#list>
                     </#if>
                 </div>



                 <div class="tabs-div myself-anser">
                     <#if qs??>
                         <#list qs as q>
                            <div class="wd-list">
                                <p class="p">${q.content}</p>
                                <div class="tips"><span>时间：${q.createTimeStr}</span></div>
                            </div>
                         </#list>
                     </#if>
                 </div>


                 <div class="tabs-div myself-msg">
                     <#if ms??>
                        <#list ms as m>
                            <div class="wd-list">
                                <h3>${m.title}</h3>
                                <div class="tips"><span>时间：${m.createTimeStr}</span></div>
                                <p class="p">${m.content}</p>
                            </div>
                        </#list>
                     </#if>
                 </div>
             </div>
         </div>

         <ul class="login-input h5-loginyout">
             <li>
                   <#if user.photoUrl??>
                    <img width="100%" id="userPic" src="${base}/system/getImg?imgId=${user.photoUrl!''}&w=88" alt="">
                   <#else>
                       <img width="100%" id="userPic" src="${base}/client/images/pic/myself/user.png"/>
                   </#if>

                    
             </li>

             <li class="name"><span>${user.nickName}</span></li>

            <li class="tips">
                  <span>${user.whois!''}</span>
            </li>
             <li class="btn">
                 <a  class="submit" href="${base}/logout" type="submit">退出账号</a>
             </li>

         </ul>
    </div>   
</div>



<div id="myModal" class="reveal-modal">
     <div class="close-reveal-modal close-reveal">X</div>
      <h2>修改密码</h2>
      <ul>
          <li><b>旧密码</b><input id="oldpwd" type="password"></li>
          <li><b>新密码</b><input id="newpwd" type="password"></li>
          <li><b>确认密码</b><input id="conpwd" type="password"></li>
      </ul>
      <button class="Psubmit close-reveal">保存</button>
</div>
</#macro>
<#macro js>
<script src="${base}/system/charisma-static/bower_components/jquery/jquery.min.js"></script>
    <script src="${base}/client/js/jquery.reveal.js"></script>
    <script src="${base}/client/js/myself.js"></script>
<script src="${base}/system/charisma-static/js/jquery.uploadify-3.1.min.js"></script>

<script type="text/javascript">
    <#if can_edit??>
    jQuery(document).ready(function () {
        jQuery('#imgSel').uploadify({
            'swf':'${base}/system/charisma-static/misc/uploadify.swf',
            'uploader': '${base}/system/uploadImg',
            'fileTypeExts': '*.jpg;*.gif;*.jpeg;*.png;',
            'buttonText': '设置头像',
            'fileObjName': 'file',
            'multi': false,
            onSelect: function (file) {//当每个文件添加至队列后触发
                if (file.size >= 2 * 1024 * 1024) {
                    alert("选择文件不能超过2MB");
                    return false;
                }
            },
            onError: function (event, queueID, fileObj) {
                alert("文件:" + fileObj.name + "上传失败");
            },
            onUploadSuccess: function (file, data, response) {
                data = JSON.parse(data);
                jQuery.ajax({
                    type: "POST",
                    url: '${base}/system/changeUserPhoto',
                    dataType: "json",
                    data: {"photoUrl": data.filePath},
                    success: function (data) {
                        if (data.status == 1) {
                            $("#userPicDiv img").remove();
                            $("#userPicDiv").append("<img src='${base}/system/getImg?imgId=" + data.data + "&w=88'/>");
                        } else {
                            alert("变更失败！");
                        }
                    },
                    error: function (obj) {
                        console.info(obj);
                    }
                });
            }
        });
    });
</script>

<script>
$(function(){       




        $('.Psubmit').on('click',function(){
            var oldpwd=$('#oldpwd').val(),
                    newpwd=$('#newpwd').val(),
                    conpwd=$('#conpwd').val();
                 $.ajax({
                    method: "POST",
                    url: "${base}/system/modifypwd",
                     dataType: 'json',
                    data: { "oldPwd": oldpwd, "newPwd": newpwd, "conPwd":conpwd},
                    success:function(res){
                        if(res.status != 1){
                            alert(res.msg);
                        }else if(res.status == 1){
                            alert("修改成功！请重新登录！");
                            window.location = "${base}/login";
                        }
                    },
                    error:function(){}
                 })
        });



        // 修改昵称
        var setname=$('.setname');
        var submitName=$('.submitName');
        var name=$('#name');

        var nameVal=name.val();
        
        name.attr('readonly','readonly');

        // 保存、修改名字
        $('.setname').on('click',function(){
                var isSubmit=$(this).hasClass('submitName');
                var nameVal=$('#name').val();
                if(isSubmit){
                    name.attr('readonly','readonly');
                    $(this).text('修改');
                    console.info(setname);
                    console.info(submitName);
                    console.info(nameVal);
                     $.ajax({
                        method: "POST",
                         dataType: 'json',
                        url: "${base}/system/modifyName",
                        data: { name: nameVal},
                        success:function(){console.info("保存成功")},
                        error:function(){}
                     })
                }else{
                    name.removeAttr('readonly').focus();
                    $(this).text('保存');
                }

                $(this).toggleClass('submitName');          
        })

        name.on('blur',function(){
            name.attr('readonly','readonly');
            setname.text('修改');
        })


        // 修改介绍
        var setintro=$('.setintro');
        var submitIntro=$('.submitIntro');
        var intro=$('#intro');
        var introval=intro.val();

        intro.attr('readonly','readonly');

        $('.setintro').on('click',function(){
            
                var isSubmit=$(this).hasClass('submitIntro');
                var introval=$('#intro').val();
                if(isSubmit){
                    intro.attr('readonly','readonly');
                    $(this).text('修改');
                    
                     $.ajax({
                        method: "POST",
                         dataType: 'json',
                        url: "${base}/system/modifyWhois",
                        data: { whoIs: introval},
                        success:function(){console.info("修改介绍成功！")},
                        error:function(){}
                     })
                }else{
                    intro.removeAttr('readonly').focus();
                    $(this).text('保存');
                }

                $(this).toggleClass('submitIntro'); 

                intro.css({border:'1px solid #ccc'})        
        })


        intro.on('blur',function(){
            intro.attr('readonly','readonly');
            setname.text('修改');
            intro.css({border:'none'}) 
        })
})
    </#if>
</script>
</#macro>
